<template>
  <div class="app_containers pos">
    <moitorHeader></moitorHeader>
    <div class="bgc_a">
      <div class="switchs"></div>
      <moitorSelect value="/allmonitor"></moitorSelect>
    </div>
    <div class="m_main">
      <div class="box">
        <div class="lelf_module">
          <div class="magin_top">
            <div class="equipment_text">设备在线情况统计</div>
            <div class="equipment_a">
              <div class="equipment_h">
                <div id="intelligence_Bracelet" class="equipment_b"></div>
                <div class="equipment_k" slot="reference">智能手环</div>
                <div
                  class="equipment_v"
                  slot="reference"
                  v-if="IntelligentDevices['Bracelet']?.totalCount"
                >
                  {{
                    IntelligentDevices["Bracelet"]?.onlineCount +
                    "/" +
                    IntelligentDevices["Bracelet"]?.totalCount
                  }}
                </div>
              </div>
              <div class="equipment_h">
                <div id="intelligence_Mattress" class="equipment_b"></div>
                <div class="equipment_k">智能床垫</div>
                <div
                  class="equipment_v"
                  v-if="IntelligentDevices['Mattress']?.totalCount"
                >
                  {{
                    IntelligentDevices["Mattress"]?.onlineCount +
                    "/" +
                    IntelligentDevices["Mattress"]?.totalCount
                  }}
                </div>
              </div>
              <div class="equipment_h">
                <div id="intelligence_Radar" class="equipment_b"></div>
                <div class="equipment_k">毫米波雷达</div>
                <div class="equipment_v" v-if="IntelligentDevices['Radar']?.totalCount">
                  {{
                    IntelligentDevices["Radar"]?.onlineCount +
                    "/" +
                    IntelligentDevices["Radar"]?.totalCount
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="alarm_Statistics_a">
            <div class="alarm_Statistics_text">今日告警历史统计</div>
            <div class="alarm_Statistics_box_x">
              <div
                class="alarm_Statistics_box"
                v-for="item in warCount"
                :key="item.warnType"
              >
                <span class="alarm_Statistics_sos"
                  >{{ item.description }}({{ item.typeCount }})</span
                >
                <a-popover
                  placement="right"
                  :trigger="'click'"
                  overlayClassName="hide"
                  @visibleChange="changedevice($event, item)"
                >
                  <template #content>
                    <p style="font-weight: 700; text-align: center; color: #fff">
                      {{ item.description }}列表
                    </p>
                    <a-table
                      :dataSource="statisticsList"
                      :columns="tbcolumns"
                      overlayClassName="cs"
                    >
                    </a-table>
                  </template>
                  <span class="iconfont icon-biaodan-chakan" slot="reference"></span>
                </a-popover>
                <div :id="item.warnType + '_Alarm'" class="alarm_Statistics_tb"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="button_module">
          <div class="map_top">
            <div class="map_txet">
              <!-- <a-select
                v-model:value="selectMapId"
                @change="changeMap"
                class="map_text_x"
              >
                <a-select-option
                  v-for="item in maplist"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select> -->
              <rwSelect
                v-model:value="selectWardId"
                type="ward"
                className="map_text_x"
                :xhrParams="{ data: 'data' }"
                @input="changeWard"
                @loadList="loadList"
              ></rwSelect>
            </div>
          </div>
          <div class="map_Component" id="map_Component">
            <div id="map" class="map"></div>
            <div class="map_screen" id="fullscreenButton" @click="amplify">
              <Icon class="icons" icon="ant-design:fullscreen-outlined"></Icon>
              <span class="map_Full_Screen">全屏地图模式</span>
            </div>
            <div class="module_refresh">
              <Icon
                class="icons"
                icon="ant-design:reload-outlined"
                @click="refresh"
              ></Icon>
              <Icon
                class="icons"
                icon="ant-design:minus-circle-outlined"
                @click="add"
              ></Icon>
              <Icon
                class="icons"
                icon="ant-design:plus-circle-outlined"
                @click="cs"
              ></Icon>
            </div>
            <div class="toogle_map" v-if="maplist.length">
              <a-popover placement="topLeft" overlayClassName="toogle_pop">
                <template #content>
                  <div
                    class="map_item"
                    :class="[selectMapId.id == item.id ? 'map_active' : '']"
                    v-for="item in maplist"
                    @click="changeMap(item.id)"
                    :key="item.id"
                  >
                    <p class="select_title">{{ item.name }}</p>
                    <img class="select_img" :src="getImg(item.id)" />
                  </div>
                </template>
                <a-button>{{ selectMapId.name }} / 切换地图</a-button>
              </a-popover>
            </div>
          </div>
          <div class="map_bottom"></div>
        </div>

        <moitorSlider :list="alarmstatistics"></moitorSlider>
      </div>
    </div>
  </div>
</template>
<script setup>
import moitorHeader from "/@/components/monitor/header.vue";
import moitorSlider from "/@/components/monitor/slider.vue";
import moitorSelect from "/@/components/monitor/monitorSelect.vue";
import rwSelect from "/@/components/RW/orgSelect.vue";
import { ref, onMounted, onUnmounted, nextTick, reactive, unref } from "vue";
import { router } from "/@/router";
import "../../assets/iconfont/iconfont.css";
import * as api from "./index.api";
import { getPeopleCounting, getWarningCount } from "../../api/common/map";
import moment from "moment";
import { useMap } from "/@/hooks/rw/map";
import screenfull from "screenfull";
import * as echarts from "echarts";
import { BasicWarnTypeEnum } from "/@/utils/type";
import utlis, { getImg } from "/@/utils/rw/utli";
import { useFullscreen } from "@vueuse/core";
// import { list } from "/@/views/alarm/real/real.api.ts";
const warCountList = [];
const mapC = ref(null);
const mapI = ref(null);
const tbcolumns = [
  {
    title: "床号",
    dataIndex: "bedCode",
    key: "bedCode",
  },
  {
    title: "姓名",
    dataIndex: "binderName",
    key: "binderName",
  },
  {
    title: "告警时间",
    dataIndex: "createdTime",
    key: "createdTime",
  },
];
onMounted(async () => {
  const { common, map } = useMap({
    el: "map",
  });
  mapI.value = map;
  mapC.value = common;
  await getMaps();

  await getWarCount();
  await getWarningList();
  await getWarHisCount();
  getDeviceStatus();

  nextTick(() => {
    for (let i = 0; i < warCount.value.length; i++) {
      alarm_charts(warCount.value[i]);
    }
    setTimeout(() => {
      initQuery();
    }, 500);
  });
});
onUnmounted(() => {
  exit();
});
const rwmapRef = ref(null);
const nowMap = ref({});
const selectMapId = ref({});
const selectWardId = ref("");
const maplist = ref([]);
const map = ref({});
let countTimer = null;
const queryParams = ref({
  pageIndex: 1,
  limit: 10,
  keyWord: undefined,
  WarnType: "",
});
const statistics = ref(20);
const tabulation = ref([]);
const IntelligentDevices = ref({});
const IntelligentMattress = ref({});
const IntelligentBadge = ref({});
const IntelligentRadar = ref({});
const showfullscreenElement = ref(false);
const warCount = ref({});
const alarmstatistics = ref([]);
const statisticsList = ref([]);
function changedevice(vaild, item) {
  if (!vaild) return;
  api.gethisCountInfo(item.warnType).then((res) => {
    statisticsList.value = res.data;
    // statisticsList.value = [{ bedCode: "123" }];
  });
}
function initQuery() {
  const { mapId, wardId } = router.currentRoute._value.query;
  if (!wardId) return;
  selectWardId.value = wardId;
  changeMap(mapId);
}
function exit() {
  mapC.value.stop();
  clearTimeout(countTimer);
}
function ins() {}
function jump() {
  router.push("/alarm/history");
}
function realTime() {
  router.push("/alarm/real");
}
function jump_homepage() {
  router.push("/newBraceletmonitoring");
}
function changeWard(id) {
  selectWardId.value = id;
  getMaps();
}
function getWarCount() {
  let func = async () => {
    let res = await api.getCount();
    alarmstatistics.value = res.data;
    countTimer = setTimeout(() => {
      func();
    }, 1000);
  };
  func();
}
async function getWarHisCount() {
  let res = await api.gethisCount();
  warCount.value = res.data;
}
function loadList(list) {
  selectWardId.value = list[0].id;
}
//实时告警
function getWarningList() {
  list(queryParams.value).then((res) => {
    tabulation.value = res.data.entities;
  });
}
//扇形可视数据图，雷达
function visualizations(a, percent) {
  console.log(a, percent);
  let intelligence_Bracelet = echarts.init(document.getElementById(a));
  const option = {};
  intelligence_Bracelet.setOption(option);
}
//扇形可视数据图，手环，床垫
function visualization(a, percent, total) {
  let dom = document.getElementById(a);
  if (!dom) return;
  let intelligence_Bracelet = echarts.init(dom);
  const option = {
    tooltip: {
      show: false,
      formatter: "{a} <br/>{b} : {c}%",
    },
    title: [
      {
        y: "60%",
        x: "center",
        textStyle: {
          fontSize: 36,
          fontFamily: "yueyuan",
          color: "#b3defc",
        },
      },
    ],
    series: [
      {
        name: "最外部进度条",
        type: "gauge",
        radius: "100%",
        center: ["center", "center"], // 仪表位置
        splitNumber: 100,
        axisLine: {
          lineStyle: {
            color: [
              [100, new echarts.graphic.LinearGradient(0, 1, 0, 0)],
              [1, "#f00"],
            ],
            width: 10,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        itemStyle: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        animationDuration: 4000,
      },
      {
        name: "渐变数据环整个",
        type: "pie",
        radius: ["80%", "95%"],
        avoidLabelOverlap: false,
        startAngle: 210,
        color: [
          {
            type: "linear",
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#5EB409", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5EB409", // 100% 处的颜色
              },
            ],
          },
          "transparent",
        ],
        hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
        legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: total,
            name: "1",
            itemStyle: {
              borderWidth: 3,
              borderColor: "#4C7FDB",
            },
          },
          {
            value: total / 2,
            name: "2",
            itemStyle: {
              borderWidth: 0,
              borderColor: "transparent",
            },
          },
        ],
      },
      {
        name: "内部渐变线 ",
        type: "pie",
        radius: ["49%", "55%"],
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        startAngle: -30,
        hoverAnimation: false,
        legendHoverLink: false,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: ["#4497EA"],
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: total / 2,
            name: "1",
            itemStyle: {
              color: ["transparent"],
            },
          },
          {
            value: total,
            name: "2",
          },
        ],
      },
      {
        name: "环形百分比",
        type: "pie",
        radius: ["80%", "95%"],
        avoidLabelOverlap: false,
        startAngle: -38,
        color: ["#091424", "transparent", "transparent"],
        hoverAnimation: false,
        legendHoverLink: false,
        clockwise: false, //饼图的扇区是否是顺时针排布。
        itemStyle: {
          show: false,
          normal: {
            borderColor: "transparent",
            borderWidth: "20",
          },
          emphasis: {
            borderColor: "transparent",
            borderWidth: "20",
          },
        },
        z: 10,
        label: {
          normal: {
            show: false,
            position: "center",
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: ((total - percent) * 150) / 240,
            label: {
              normal: {
                formatter: utlis.Percentage(percent, total, true),
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "18",
                  fontWeight: "normal",
                  color: "#b3defc",
                },
              },
            },
            name: "",
          },
          {
            value: 0,
            name: "",
          },
          {
            value: total - ((total - percent) * 260) / 360,
            name: "",
          },
        ],
      },
    ],
  };
  intelligence_Bracelet.setOption(option);
  window.addEventListener("resize", () => {
    intelligence_Bracelet.resize();
  });
}
function alarm_charts(item) {
  let chanrtDOM = echarts.init(document.getElementById(`${item.warnType}_Alarm`));
  let rValue = item.typeCount || 0;
  const option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        show: false,
        axisLabel: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#48C6EF",
              },
              {
                offset: 1,
                color: "#6F86D6",
              },
            ]),
          },
        },
        barWidth: 20,
        data: [rValue], //柱体内容
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
        data: [item.total], //柱体背景色
        itemStyle: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#A1C4FD",
            },
            {
              offset: 1,
              color: "#C2E9FB",
            },
          ]),
        },
      },
    ],
  };
  console.log(option, "options");
  chanrtDOM.setOption(option);
  window.addEventListener("resize", () => {
    chanrtDOM.resize();
  });
}
//地图-----------------------------------------------------------------------------------------------------
//放大
function cs() {
  document.querySelector(".leaflet-control-zoom-in").click();
}
//地图缩放
function add() {
  document.querySelector(".leaflet-control-zoom-out").click();
}
//刷新地图
function refresh() {
  getMaps();
}
//全屏
function amplify() {
  const mapContainer = document.getElementById("map_Component");

  const clonedMapContainer = mapContainer.cloneNode(true);
  if (document.fullscreenElement) {
    // 退出全屏
    document.exitFullscreen();
  } else {
    // 进入全屏
    mapContainer.requestFullscreen();
    showfullscreenElement.value = true;
  }
}

function change(e) {
  if (!e.deviceCode) return msgError("该标签未绑定");
  monitorTag = e.binderId;
  map.setMonitorTag(e.deviceCode);
  let TagCode = e.deviceCode;
  map.Mqtt.setRealSensingShareDevice(TagCode);
  GetMembersPosition(e.deviceCode).then((res) => {
    if (nowMap.value.code != res.data) {
      const r = maplist.value.find((item) => item.code == res.data);
      if (r) {
        loadMap(r.id);
      }
    }
  });
}
function setInfoDiagramCallback() {
  let diagram = infoDlg.newInstance("m_map").diagram;
  return diagram;
}

function loadMap(mapId) {
  const r = maplist.value.find((item) => item.id == mapId);
  if (!r) {
    msgError("未找到地图");
    return;
  }
  nowMap.value = r;
  r.imgUrl = window.config.base_url + r.imageUrl;
  map.loadMap(r).then(() => {
    getHeatmapLayer();
  });
}
function getHeatmapLayer() {
  let func = () => {
    getPeopleCountTimer = setTimeout(() => {
      getPeopleCounting().then((res) => {
        peopleCountList = res.data;
        map.setHeatmapLayerData({ heatList: peopleCountList });
        func();
      });
    }, 1000);
  };
  func();
}
function changeMap(map) {
  let r = maplist.value.find((item) => {
    return item.id == map;
  });

  if (!r) return;
  selectMapId.value = r;
  mapC.value.loadMap(r);
  mapC.value.initPosition({ mapId: map }, 2000);
}
async function getMaps() {
  let res = await api.getMap({ WardId: selectWardId.value });
  maplist.value = res.data.find((item) => {
    return item.wardId == selectWardId.value;
  }).maps;
  if (maplist.value.length > 0) {
    selectMapId.value = maplist.value[0];
    mapC.value.loadMap(maplist.value[0]);
    mapC.value.initPosition({ mapId: maplist.value[0].id }, 2000);
  }
}
function getDeviceStatus() {
  api.getolLine().then((res) => {
    let data = res.data;
    data.forEach((item) => {
      IntelligentDevices.value[item.deviceCategory] = item;
      visualization(
        `intelligence_${item.deviceCategory}`,
        item.onlineCount,
        item.totalCount
      );
    });
  });
}
</script>
<style lang="scss">
.jeecg-default-layout-main {
  margin-left: 0;
}
.jeecg-setting-drawer-fearure {
  display: none;
}
.ant-select-dropdown {
  z-index: 9999;
}

.ant-popover {
  z-index: 9999 !important;
}
.hide {
  width: 500px !important;
  overflow: auto;
  height: 30vh;
  background-color: #0f285a;
  border: 1px solid #1b60cc;

  .ant-table {
    background: transparent !important;
  }
  .ant-table .ant-table-thead th {
    border-bottom: 1px solid #618ee2;
    background-color: transparent;
    color: #fff;
  }
  .ant-table .ant-table-tbody .empty-text {
    color: #fff;
  }
  .ant-table .ant-table-tbody tr {
    background-color: transparent;
    color: #fff;
  }
  .ant-table .ant-table-tbody tr:hover > td {
    background-color: #618ee2;
    border-bottom: 1px solid #618ee2;
  }
  .ant-table .ant-table-tbody td {
    border-bottom: 1px solid #4e88df;
  }

  .ant-popover-inner,
  .ant-table-tbody {
    background-color: transparent !important;
    background: transparent !important;
  }
  .ant-empty-description {
    color: #fff;
  }
}

.pos {
  .ant-select {
    width: 80% !important;
  }
  .ant-select-selection-placeholder {
    color: #01c3e8 !important;
  }
  .iconfont {
    width: 100%;
    height: 70%;
    background-image: -webkit-linear-gradient(bottom, #0e9afa, #35eaed, #3fffea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .ant-popover {
    z-index: 9999 !important;
  }
  .mattressHidden {
    width: 500px !important;
    height: 30vh !important;
    overflow: auto !important;
    position: absolute !important;
    top: 754px !important;
    left: 330px !important;
    background-color: #0f285a;
    border: 1px solid #1b60cc;
    margin-top: -12%;
    margin-left: 50px !important;
    .ant-table {
      background-color: transparent;
    }
    .ant-table .ant-table-thead th {
      border-bottom: 1px solid #618ee2;
      background-color: transparent;
      color: #fff;
    }
    .ant-table .ant-table-tbody .empty-text {
      color: #fff;
    }
    .ant-table .ant-table-tbody tr {
      background-color: transparent;
      color: #fff;
    }
    .ant-table .ant-table-tbody tr:hover > td {
      background-color: #618ee2;
      border-bottom: 1px solid #618ee2;
    }
    .ant-table .ant-table-tbody td {
      border-bottom: 1px solid #4e88df;
    }
  }
  .ant-select-selector {
    border: none !important;
    background-color: transparent !important;
    font-size: 18px;
    color: #01c3e8;
    width: 85% !important;
    margin: 0 auto;
  }
  .ant-select-arrow,
  .ant-select-selection-item {
    color: #01c3e8 !important;
    font-size: 14px;
  }
  .ant-select-dropdown {
    background: transparent;
    border: solid 1px #1b60cc !important;
    color: #fff;
    z-index: 99999;
  }
  .ant-select-item {
    color: #fff !important ;
  }
  .ant-empty-description {
    color: #fff;
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: transparent !important;
    color: #1b60cc !important;
  }
  .ant-select-item:hover {
    background: transparent;
  }
  .button_right_a {
    font-size: 18px;
    text-align: center;
    color: #01c3e8;
    margin-top: 20px;

    .el-select__caret {
      font-size: 18px !important;
      color: #01c3e8 !important;
    }
  }
  .list_text {
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    color: #01c3e8;
  }
  .leaflet-top {
    display: none;
  }
  .map_text_x {
    font-size: 18px;
    text-align: center;
    color: #01c3e8;
    z-index: 9999;
    .el-input__inner {
      border: none;
      background: transparent;
      font-size: 18px;
      color: #01c3e8;
      margin-left: 30%;
    }
    .el-select-dropdown {
      position: absolute;
      top: 50px !important;
      left: 0px !important;
      background-color: #12264b;
      border: solid 1px #1b60cc !important;
      .el-select-dropdown__item {
        background: transparent;
        background-color: #12264b;
        color: #ddd7d7;
      }
      .el-select-dropdown__item:hover {
        background-color: #1b60cc;
      }
    }
  }
}

.toogle_pop {
  .ant-popover-inner {
    background-color: #eee;
  }
  .ant-popover-content {
    max-height: 700px;
    background: rgba(255, 255, 255, 0.1);
    overflow: auto;
  }
}
</style>
<style lang="scss" scoped>
.map_active {
  .select_title {
    background: #fff;
    color: #31c27c !important;
    padding: 5px;
    font-size: 20px;
  }
}
.map_item {
  cursor: pointer;
  margin-bottom: 10px;
  background: #fff;
  &:hover {
    .select_title {
      background: #fff;
      color: #31c27c !important;
      padding: 5px;
      font-size: 20px;
    }
  }
  .select_title {
    transition: all 0.3s ease;
    color: #000;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
  .select_img {
    width: 220px;
    height: 150px;
  }
}
.app_containers {
  // min-width: 1700px;
  display: block;
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/ruijin/images/Underlay.png");
  background-size: 100% 100%;
  color: #fff;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC, Microsoft YaHei;
  padding-bottom: 20px;
  .el-icon-back {
    font-size: 18px;
    text-align: center;
    font-family: TRENDS;
    margin-left: 20px;
  }
  .bgc_a {
    width: 230px;
    height: 30px;
    margin-left: 20px;
    margin-top: 30px;
    display: flex;
    background-color: #111(0, 0, 0, 0.1);
    border-radius: 25px 25px;
    cursor: pointer;
    box-shadow: 0px 0px 10px -2px rgb(247, 245, 245);
    .switchs {
      width: 28px;
      height: 20px;
      margin-left: 15px;
      background-repeat: no-repeat;
      display: inline-block;
      background-image: url("../../assets/ruijin/images/jump.png");
      background-size: cover;
      margin-top: 5px;
    }
    .switch {
      line-height: 30px;
      font-size: 18px;
      font-family: TRENDS;
      margin-left: 15%;
    }
  }

  .m_main {
    padding: 0 !important;
    overflow: hidden;
    height: calc(100% - 100px);
    .box {
      width: 100%;
      height: 100%;
      display: flex;
      .lelf_module {
        width: 35%;
        height: 100%;
        margin-right: 20px;
        z-index: 9999;
        .magin_top {
          width: 100%;
          height: 40%;
          margin: 10px;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .equipment_text {
            width: 100%;
            height: 30%;
            font-size: 20px;
            text-align: center;
            line-height: 110px;
          }
          .equipment_a {
            display: flex;
            padding: 10px;
            width: 100%;
            height: 70%;
            .equipment_h {
              width: 30%;
              height: 70%;
              margin-left: 10px;
              .equipment_b {
                width: 100%;
                height: 60%;
              }
              .equipment_k {
                font-size: 15px;
                margin-top: 5px;
                text-align: center;
              }
              .equipment_v {
                font-size: 12px;
                text-align: center;
                margin-top: 10px;
              }
            }
          }
        }
        .braceletStatus {
          width: 100%;
          height: 67%;
          margin: 10px;
          display: flex;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .bracelet_monitoring {
            margin-top: 15%;
            margin-left: 10%;
            width: 130px;
            height: 50px;
            .bracelet_picture {
              width: 38px;
              height: 52px;
              background-image: url("../../assets/ruijin/images/bracelet.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            // .bracelet_text {
            //   margin-left: 20px;
            //   font-size: 18px;
            //   line-height: 50px;
            // }
          }
          .electricity_cc {
            width: 100%;
            height: 100%;
            display: flex;
            .electricity_aa {
              width: 50%;
              margin-top: 20%;
              .electricity_a {
                width: 30px;
                height: 42px;
                background-image: url("../../assets/ruijin/images/battery.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 20px;
              }
              .text_l {
                width: 100%;
                font-size: 18px;
                margin-top: 20px;
              }
            }
            .electricity_bb {
              width: 50%;
              margin-top: 20%;
              .electricity_b {
                width: 30px;
                height: 40px;
                background-image: url("../../assets/ruijin/images/disconnect.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: 20px;
              }
              .text_c {
                width: 100%;
                font-size: 18px;
                margin-top: 20px;
              }
            }
          }
        }
        .bedStatus {
          width: 100%;
          height: 67%;
          margin: 10px;
          display: flex;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .bed_electricity {
            margin-top: 15%;
            margin-left: 10%;
            width: 300px;
            height: 50px;
            .bed_picture {
              width: 58px;
              height: 36px;
              background-image: url("../../assets/ruijin/images/mattress.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            // .bed_text {
            //   margin-left: 20px;
            //   font-size: 18px;
            //   line-height: 50px;
            // }
          }
          .network_aa {
            margin-top: 10%;
            width: 100%;
            height: 100%;
            .network_b {
              width: 30px;
              height: 40px;
              margin-left: 40%;
              background-image: url("../../assets/ruijin/images/disconnect.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .text_c {
              width: 50%;
              font-size: 18px;
              margin-left: 30%;
              margin-top: 20px;
            }
          }
        }
        .millimeterWaveRadarStatus {
          width: 100%;
          height: 70%;
          margin: 10px;
          display: flex;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .millimeterWaveRadar_picture_a {
            margin-top: 15%;
            margin-left: 10%;
            width: 300px;
            height: 50px;
            .millimeterWaveRadar_picture_b {
              width: 58px;
              height: 59px;
              background-image: url("../../assets/ruijin/images/millimeterwaveradar.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
          .millimeterWaveRadar_picture_c {
            margin-top: 10%;
            margin-left: 28%;
            width: 100%;
            height: 100%;
            .millimeterWaveRadar_picture_d {
              width: 30px;
              height: 40px;
              margin-left: 20px;
              background-image: url("../../assets/ruijin/images/disconnect.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .millimeterWaveRadar_picture_text {
              width: 100%;
              font-size: 18px;
              margin-top: 20px;
            }
          }
        }
        .pie_shaped_visual {
          width: 100px;
          height: 100px;
        }
        .alarm_Statistics_a {
          width: 100%;
          height: 58%;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .alarm_Statistics_text {
            width: 100%;
            text-align: center;
            line-height: 90px;
            font-size: 18px;
            color: #01c3e8;
          }
          .alarm_Statistics_box_x {
            width: 100%;
            height: 80%;
            .alarm_Statistics_box {
              width: 100%;
              height: 17%;
              .alarm_Statistics_sos {
                font-size: 18px;
                margin-left: 20px;
                display: inline-block;
                width: 80%;
              }
              .alarm_Statistics_tb {
                height: 70%;
              }
            }
          }
        }
      }
      .button_module {
        width: 100%;
        height: 100%;
        position: relative;
        .map_top {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 90%;
          height: 10px;
          z-index: 1000;
          background-image: url("../../assets/ruijin/images/decorationtop.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          margin-left: 5%;
          .map_txet {
            width: 50%;
            height: 60px;
            margin-left: 25%;
            background-image: url("../../assets/ruijin/images/transparent.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-size: 18px;
            text-align: center;
            line-height: 60px;
            color: #01c3e8;
          }
        }

        .map_Component {
          width: 100%;
          height: 100%;
          background-image: url("../../assets/ruijin/images/floor.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          #map {
            background-image: url(/src/assets/ruijin/images/Underlay.png);
            background-size: cover;
            width: 100%;
            height: 93%;
            margin-top: 5%;
          }
          .map_screen {
            position: absolute;
            top: 3%;
            margin-left: 5%;
            z-index: 999;
            .icons {
              font-size: 30px !important;
            }
            .map_Full_Screen {
              font-size: 18px;
              margin-left: 10px;
            }
          }
          .toogle_map {
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 9999;
          }
          .module_refresh {
            position: absolute;
            top: 3%;
            right: 5%;
            z-index: 9999;
            .icons {
              font-size: 30px !important;
              margin-left: 20px;
            }
          }
          .map {
            width: 100%;
            height: 90%;
          }
        }
        .map_bottom {
          position: relative;
          top: 96%;
          bottom: 0;
          width: 80%;
          height: 10px;
          margin-left: 121px;
          background-image: url("../../assets/ruijin/images/decorationbottom.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .btn_module {
          width: 100%;
          height: 32%;
          display: flex;

          .button_right {
            width: 50%;
            height: 100%;
            margin-left: 10px;
            background-image: url("../../assets/ruijin/images/border.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .btn_content {
              width: 100%;
              margin-top: 30px;
              margin-left: 40px;
              font-size: 18px;
              color: #01c3e8;
            }
            .equipment {
              width: 100%;
              height: 75%;
              margin-left: 10px;
            }
          }
          .button_left {
            width: 50%;
            height: 100%;
            margin-left: 10px;
            background-image: url("../../assets/ruijin/images/border.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .btn_content {
              width: 100%;
              margin-top: 30px;
              margin-left: 40px;
              font-size: 18px;
              color: #01c3e8;
            }
            .equipment {
              position: relative;
              top: 0;
              left: 4%;
              width: 100%;
              height: 70%;
            }
          }
        }
      }
      .right_module {
        width: 35%;
        height: 100%;
        margin-right: 10px;
        margin-left: 15px;
        margin-top: 10px;
        z-index: 9999;
        .right_top {
          width: 100%;
          height: 25%;
          display: flex;
          background-image: url("../../assets/ruijin/images/border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .right_top_a {
            width: 40%;
            .nurse {
              width: 55px;
              height: 60px;
              margin-top: 50%;
              margin-left: 40%;
              background-image: url("../../assets/ruijin/images/nurse.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }

          .nurse_Information {
            width: 60%;
            .InformationA {
              margin-top: 25%;
              font-size: 18px;
            }
            .InformationB {
              font-size: 18px;
              margin-bottom: 20px;
              margin-top: 20%;
            }
          }
        }
        .right_button {
          width: 100%;
          height: 73%;
          margin-top: 10px;
          background-image: url("../../assets/ruijin/images/frame.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .alarm_list {
            width: 100%;
            height: 40px;
            padding-top: 25px;
            text-align: center;
            .list_text {
              font-size: 18px;
              text-align: center;
              color: #01c3e8;
              z-index: 99999;
              .ant-select-dropdown {
                z-index: 999 !important;
              }
            }
          }
          .list_data {
            width: 100%;
            height: 85%;
            margin-top: 20px;
            .warning_content_ul {
              height: 100%;
              overflow: auto;
              padding: 0;
              .no_data {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ddd;
                font-size: 18px;
              }

              .a_a {
                width: 100%;
                height: 16%;
                margin-top: 2%;
                background-color: rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                .a_b {
                  display: flex;
                  font-size: 18px;
                  margin-left: 5%;
                  width: 100%;
                  .a_t {
                    width: 80%;
                    height: 100%;
                  }

                  .a_r {
                    .bracelet_picture_a {
                      width: 20px;
                      height: 26px;
                      margin: 0;
                      margin-top: 10px;
                      margin-right: 20px;
                      display: inline-block;
                      background-image: url("../../assets/ruijin/images/minibracelet.png");
                      background-repeat: no-repeat;
                      background-size: 100% 100%;
                    }
                  }
                }
                .a_c {
                  font-size: 15px;
                  display: flex;
                  .a_v {
                    margin-left: 10px;
                  }
                }
              }
            }
            .a_k {
              font-size: 18px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .map_amplify {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #12264b;
    z-index: 99999;
    .map_amplify_x {
      font-size: 24px;
      margin-left: 20%;
    }
    #m_map {
      background-color: transparent;
      width: 100%;
      height: 100vh;
    }
  }
}
</style>
